import InfoResourceApp from '../../../examples/files/dashboard/InfoResourceApp.tsx'
import ArticlesResoureApp from '../../../examples/files/dashboard/ArticlesResourceApp.tsx'
import ThemeSwitcherApp from '../../../examples/files/dashboard/ThemeSwitcherApp.tsx'
import TabsApp from '../../../examples/files/dashboard/TabsApp.tsx'
import TradeApp from '../../../examples/files/dashboard/TradeApp.tsx'
import Day3App from '../../../examples/files/dashboard/Day3App.tsx'

import Article from '../../../examples/files/dashboard/components/Article.tsx'
import List from '../../../examples/files/dashboard/components/List.tsx'
import StarButton from '../../../examples/files/dashboard/components/StarButton2.tsx'
import Star from '../../../examples/files/dashboard/components/Star.tsx'
import Button from '../../../examples/files/dashboard/components/Button.tsx'
import Info from '../../../examples/files/dashboard/components/Info.tsx'
import Block from '../../../examples/files/dashboard/components/Block.tsx'
import Spacer from '../../../examples/files/dashboard/components/Spacer.tsx'
import Tabs from '../../../examples/files/dashboard/components/Tabs.tsx'
import Trade from '../../../examples/files/dashboard/components/Trade2.tsx'
import useFetch from '../../../examples/files/dashboard/hooks/useFetch.tsx'
import useNumericValue from '../../../examples/files/dashboard/hooks/useNumericValue.tsx'
import resources from '../../../examples/files/dashboard/resources.ts'
import api from '../../../examples/files/dashboard/api.ts'
import main from '!!raw-loader!../../../examples/files/dashboard/main.css'

Today we'll fetch and display remote data, add a theme switcher, and handle currency conversion.

## Dark mode

Add a button that switches the theme of the app. We can do this by toggling the CSS class `theme--dark` on the root (`html`) element in a `useEffect` hook. (This is one of many ways to do theming)

> Tip: You can use `document.documentElement.classList` to access the list of CSS classes on the root element. You can then call `.add` and `.remove` to modify the list.

<Example
  height={130}
  panes={['player']}
  playerOptions={{ css: main, title: 'Dark mode', reloadable: true }}
  files={{
    'App.tsx': ThemeSwitcherApp,
    'components/Button.tsx': Button,
  }}
/>

## Fetching data

We'll be using a REST API that returns static data: https://my-json-server.typicode.com/dabbott/dashboard-json-server

Endpoints:

- [`/articles`](https://my-json-server.typicode.com/dabbott/dashboard-json-server/articles)
- [`/info`](https://my-json-server.typicode.com/dabbott/dashboard-json-server/info)

We can access an individual article or info object by its id, e.g. [`/info/1`](https://my-json-server.typicode.com/dabbott/dashboard-json-server/info).

### Fetching `/info/1`

Start by fetching and displaying the first info resource. You should use `useFetch.ts` and `api.ts`.

> Tip: Since `useFetch` is generic, you may want to _specialize_ it at the callsite for better type checking, e.g. `useFetch<InfoResource>(...)`

When the resource is loading, display a loading state (e.g. the string `"Loading..."`). You may also want to show an error message in the case where it fails to load.

<Example
  height={340}
  panes={['player']}
  playerOptions={{ css: main, title: 'Info Resource', reloadable: true }}
  files={{
    'App.tsx': InfoResourceApp,
    'components/Block.tsx': Block,
    'components/Info.tsx': Info,
    'components/Spacer.tsx': Spacer,
    'hooks/useFetch.tsx': useFetch,
    'resources.ts': resources,
    'api.tsx': api,
  }}
/>

### Fetching `/articles`

Next, fetch all articles using `useFetch`.

<Example
  height={690}
  panes={['player']}
  playerOptions={{ css: main, title: 'Articles Resource', reloadable: true }}
  files={{
    'App.tsx': ArticlesResoureApp,
    'components/Article.tsx': Article,
    'components/Block.tsx': Block,
    'components/List.tsx': List,
    'components/Spacer.tsx': Spacer,
    'hooks/useFetch.tsx': useFetch,
    'resources.ts': resources,
    'api.tsx': api,
  }}
/>

## Trade

Now that we can fetch the current price of BTC (via `/info`), we can properly convert between USD and BTC. Validate the number at a basic level (validating a number perfectly is fairly tricky - it's OK if you don't handle every edge case).

> Hint: see [parseFloat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and [isNaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) for parsing/validating numbers.

<Example
  height={390}
  panes={['player']}
  playerOptions={{ css: main }}
  files={{
    'App.tsx': TradeApp,
    'hooks/useNumericValue.ts': useNumericValue,
    'components/Trade.tsx': Trade,
    'components/Tabs.tsx': Tabs,
    'components/Button.tsx': Button,
    'components/Spacer.tsx': Spacer,
    'resources.ts': resources,
  }}
/>

## App

Putting it all together, we should be able to fetch data for our entire initial screen.

<Example
  height={1000}
  panes={['player']}
  playerOptions={{ css: main, title: 'App with data', reloadable: true }}
  files={{
    'App.tsx': Day3App,
    'hooks/useFetch.ts': useFetch,
    'hooks/useNumericValue.ts': useNumericValue,
    'components/Article.tsx': Article,
    'components/Block.tsx': Block,
    'components/Button.tsx': Button,
    'components/Info.tsx': Info,
    'components/List.tsx': List,
    'components/Spacer.tsx': Spacer,
    'components/Star.tsx': Star,
    'components/StarButton.tsx': StarButton,
    'components/Tabs.tsx': Tabs,
    'components/Trade.tsx': Trade,
    'resources.ts': resources,
    'api.tsx': api,
  }}
/>
